<template>
    <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="用电电价类型" prop="electricityPriceType">
                        <el-radio-group v-model="form.electricityPriceType">
                            <el-radio-button v-for="dict in dict.type.pv_station_electricity_price_class"
                                :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-show="form.electricityPriceType == '10'">
                    <el-form-item label="用电电价" prop="electricityPrice">
                        <el-input-number v-model="form.electricityPrice" placeholder="请输入用电电价，单位元/kWh" :precision="2"
                            :step="0.1" :max="90" style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.electricityPriceType == '11'">
                    <ElectricityPriceTable @getElectricityPriceList="getElectricityPriceList" />
                </el-col>
                <el-col :span="24">
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上网电价类型" prop="gridElectricityPriceType">
                        <el-radio-group v-model="form.gridElectricityPriceType">
                            <el-radio-button v-for="dict in dict.type.pv_station_electricity_price_class"
                                :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-show="form.gridElectricityPriceType == '10'">
                    <el-form-item label="上网电价" prop="gridElectricityPrice">
                        <el-input-number v-model="form.gridElectricityPrice" placeholder="请输入上网电价，单位元/kWh"
                            :precision="2" :step="0.1" :max="90" style="width: 100%;" />
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.gridElectricityPriceType == '11'">
                    <GridElectricityPriceTable @getGridElectricityPriceList="getGridElectricityPriceList" />
                </el-col>
            </el-row>
        </el-form>
        <div style="text-align: center;">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </div>
</template>

<script>
import { addElectricityPrice, updateElectricityPrice } from "@/api/business/electricityPrice"
import ElectricityPriceTable from "./electricityPriceTable.vue";
import GridElectricityPriceTable from "./gridElectricityPriceTable.vue";
export default {
    name: "ElectricityPrice",
    dicts: ['pv_station_electricity_price_class'],
    components: { ElectricityPriceTable, GridElectricityPriceTable },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 光伏电站电价信息主表格数据
            electricityPriceList: [],
            // 光伏电站电价信息详情表格数据
            electricityPriceDetailList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                pvId: null,
                electricityPriceType: null,
                electricityPrice: null,
                gridElectricityPriceType: null,
                gridElectricityPrice: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                pvId: [
                    { required: true, message: "光伏电站ID不能为空", trigger: "blur" }
                ],
                electricityPriceType: [
                    { required: true, message: "用电电价类型不能为空", trigger: "change" }
                ],
                gridElectricityPriceType: [
                    { required: true, message: "上网电价类型不能为空", trigger: "change" }
                ],
                createBy: [
                    { required: true, message: "创建人不能为空", trigger: "blur" }
                ],
                createTime: [
                    { required: true, message: "创建时间不能为空", trigger: "blur" }
                ]
            }
        }
    },
    created() {
        this.reset();
    },
    methods: {
        // 获取用电电价分段列表数据
        getElectricityPriceList(data) {
            console.log(data);
            this.form.params.electricityPriceList = data;
        },
        getGridElectricityPriceList(data) {
            console.log(data);
            this.form.params.gridElectricityPriceList = data;
        },
        // 取消按钮
        cancel() {
            this.reset()
            this.$emit('changeDrawer', false)
        },
        // 表单重置
        reset() {
            this.form = {
                priceId: null,
                pvId: null,
                electricityPriceType: '10',
                electricityPrice: null,
                gridElectricityPriceType: '10',
                gridElectricityPrice: null,
                updateBy: null,
                updateTime: null,
                createBy: null,
                createTime: null,
                params: {
                    gridElectricityPriceClass: null,
                    gridElectricityPrice: null,
                    gridElectricityPriceList: null,
                    electricityPriceClass: null,
                    electricityPrice: null,
                    electricityPriceList: null,
                }
            }
            this.resetForm("form")
        },
        /** 提交按钮 */
        submitForm() {
            this.form.params.electricityPriceClass = this.form.electricityPriceType;
            this.form.params.gridElectricityPriceClass = this.form.gridElectricityPriceType;
            this.form.params.electricityPrice = this.form.electricityPrice;
            this.form.params.gridElectricityPrice = this.form.gridElectricityPrice;
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.priceId != null) {
                        updateElectricityPrice(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功")
                            this.open = false
                            this.getList()
                        })
                    } else {
                        addElectricityPrice(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功")
                            this.open = false
                            this.getList()
                        })
                    }
                }
            })
        }
    }
}
</script>
